/*
 * @Description: 磁性载体
 * @Author: Zzt
 * @Date: 2022-11-11 14:52:39
 * @LastEditTime: 2023-01-18 09:56:37
 */
import VisualizationMain from '@/components/DataVisualization/VisualizationMain';
import Nav from '@/components/Nav';
import { Button, Checkbox, Popover, Segmented, Select, Tabs } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import styles from '../styles/magneticCarrier.module.scss';
import { CaretDownFilled } from '@ant-design/icons';
const { TabPane } = Tabs;
const cx = classNames.bind(styles);

const according = [
  { fondName: '按年度统计', id: 1 },
  { fondName: '按检测人员', id: 2 }
];
const segmentedList = [
  { label: '盘带号总数', value: 1 },
  { label: '检查次数', value: 2 },
  { label: '检查有问题数', value: 3 }
];
const table = [
  { lable: '年度', name: 'year' },
  { lable: '检查盘带号总数', name: 'checkBothNum' },
  { lable: '检测次数', name: 'checkNum' },
  { lable: '检查有问题数', name: 'qustionNum' }
];
const options = [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' }
];
const MagneticCarrierWarp = () => {
  // 选中的按照类型
  const [selectAccordingId, setSelectAccordingId] = useState(1);
  // const [options, setOptions] = useState([]);
  const [condition, setCondition] = useState(<></>);
  const [segmentValue, setSegmentValue] = useState<string | number>(1);
  const [tableList, setTableList] = useState([]);
  const [catalog, setCatalog] = useState(1);
  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleAccordingChange = (val: any) => {
    console.log(val);
    setSelectAccordingId(parseInt(val, 10));
  };
  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };
  const content = (
    <div>
      <Checkbox.Group options={options} defaultValue={[options[0]?.value]} onChange={onChange} />
    </div>
  );

  const SegmentedList = (
    <>
      <Segmented options={segmentedList} value={segmentValue} onChange={setSegmentValue} />
    </>
  );

  const changeCatalog = (value: any) => {
    console.log(value);
    setCatalog(value);
  };
  const SelectList = (
    <>
      <Select
        suffixIcon={<CaretDownFilled />}
        value={catalog}
        bordered={false}
        className="select-after"
        options={[
          {
            value: 1,
            label: '按目录创建'
          },
          {
            value: 2,
            label: '按目录移出'
          }
        ]}
        onChange={changeCatalog}
      />
    </>
  );

  useEffect(() => {
    console.log('table', table);
    const removed = table.slice(0);
    if (selectAccordingId === 1) {
      setTableList(removed);
      setCondition(<Nav />);
    }
    if (selectAccordingId === 2) {
      removed.splice(1, 0, { lable: '检测人', name: 'checkMan' });
      console.log(table);
      setTableList(removed);
      setCondition(
        <>
          <Nav />
          <Popover placement="bottom" content={content} trigger="click">
            <Button type="text">
              检测人
              <CaretDownFilled />
            </Button>
          </Popover>
        </>
      );
    }
  }, [selectAccordingId]);
  /* 改变年触发 */
  const onChangeYear = (after: any, before: any) => {
    console.log('after,before', after, before);
  };
  return (
    <>
      <Tabs tabPosition="left" className={cx('tab')} onTabClick={handleAccordingChange}>
        {according.map((item) => (
          <TabPane tab={<>{item.fondName}</>} key={item.id}>
            <VisualizationMain
              type={selectAccordingId}
              condition={condition}
              segmented={SegmentedList}
              tableList={tableList}
              onChange={onChangeYear}
            />
          </TabPane>
        ))}
      </Tabs>
    </>
  );
};
export default MagneticCarrierWarp;
